<template>
  <div class="fr">
      <div class="rrr">
          <div class="ar mb20">
                <a href="#" class="fl"><img src="@/assets/images/7.png"></a>
                <div class="fr">
                    <a href="#" class="jihua">2022年7月学习计划</a><br>
                    <span style="color: red;" class="iconfont">&#xe610;</span>
                    <span style="color: red;">置顶</span>
                    <span>|</span>
                    <span class="iconfont">&#xe8cf;</span>
                    <span>发表时间 2022-07-01</span>
                    <span>|</span>
                    <span class="iconfont">&#xe60c;</span>
                    <a href="#"><span>学习计划</span></a>
                    <span>|</span>
                    <span class="iconfont">&#xe60d;</span>
                    <a href="#"><span>学习计划</span></a>
                    <p>2022年7月学习计划</p>
                </div>
            </div>
            <div class="br mb20">
              <a href="#" class="fr"><img src="@/assets/images/3.png"></a>
                <div class="fl">
                    <a href="#" class="jihua">MyBaits学习笔记(新版)</a><br>

                    <span class="iconfont">&#xe8cf;</span>
                    <span>发布于2022-06-2</span>

                    <span>|</span>

                    <span class="iconfont">&#xe60c;</span>
                    <a href="#"><span>微服务核心</span></a>

                    <span>|</span>

                    <span class="iconfont">&#xe60d;</span>
                    <a href="#"><span>Java MyBaits</span></a>
                    <p class="hidd">MyBatis 是一款优秀的持久层框架，它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的顶顶顶顶顶顶顶</p>
                </div>
                
            </div>       
            <div class="ar mb20">
                <a href="#" class="fl"><img src="@/assets/images/6.png"></a>
                <div class="fr">
                    <a href="#" class="jihua">MyBatis学习笔记</a><br>

                    <span class="iconfont">&#xe8cf;</span>
                    <span>发表于 2022-06-12</span>

                    <span>|</span>

                    <span class="iconfont">&#xe60c;</span>
                    <a href="#"><span>微服务核心</span></a>

                    <span>|</span>

                    <span class="iconfont">&#xe60d;</span>
                    <a href="#"><span>Java MyBatis</span></a>

                </div>
            </div>
            <div class="br mb20">
                <div class="fl">
                    <a href="#" class="jihua">励志名言</a><br>

                    <span class="iconfont">&#xe8cf;</span>
                    <span>发表于 2022-06-22</span>

                    <span>|</span>

                    <span class="iconfont">&#xe60c;</span>
                    <a href="#"><span>名言警句</span></a>

                    <span>|</span>

                    <span class="iconfont">&#xe60d;</span>
                    <a href="#"><span>励志图片 心灵鸡汤</span></a>

                    <p>做事有始有终值得开始的事就值得完成。聪明人做事总是有始有终</p>
                </div>
                <a href="#" class="fr"><img src="@/assets/images/5.png"></a>
            </div>
            <div class="ar mb20">
                <a href="#" class="fl"><img src="@/assets/images/4.png"></a>
                <div class="fr">
                    <a href="#" class="jihua">クレヨンしんちゃん</a><br>

                    <span class="iconfont">&#xe8cf;</span>
                    <span>发表于 2022-07-12</span>

                    <span>|</span>

                    <span class="iconfont">&#xe60c;</span>
                    <a href="#"><span>日语听力</span></a>

                    <span>|</span>

                    <span class="iconfont">&#xe60d;</span>
                    <a href="#"><span>日语学习 蜡笔小新</span></a>
                    <p>《蜡笔小新》是由日本漫画家臼井仪人创作的漫画。</p>
                </div>
            </div>
            <div class="br mb20">
                <div class="fl">
                    <a href="#" class="jihua">Vue2学习笔记</a><br>

                    <span class="iconfont">&#xe8cf;</span>
                    <span>发表于 2022-05-28</span>

                    <span>|</span>

                    <span class="iconfont">&#xe60c;</span>
                    <a href="#"><span>前端学习</span></a>

                    <span>|</span>

                    <span class="iconfont">&#xe60d;</span>
                    <a href="#"><span>前端框架 Vue2</span></a>
                    <p class="hidd">Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为适合使用的</p>
                </div>
                <a href="#" class="fr"><img src="@/assets/images/10.png"></a>
            </div>
            <div class="ar mb20">
                <a href="#" class="fl"><img src="@/assets/images/9.png"></a>
                <div class="fr">
                    <a href="#" class="jihua">微信支付实战</a><br>

                    <span class="iconfont">&#xe8cf;</span>
                    <span>发表于 2022-06-18</span>

                    <span>|</span>

                    <span class="iconfont">&#xe60c;</span>
                    <a href="#"><span>项目学习</span></a>

                    <span>|</span>

                    <span class="iconfont">&#xe60d;</span>
                    <a href="#"><span>项目学习 项目训练</span></a>

                    <p>在线支付实战：微信支付和支付宝支付</p>
                </div>
            </div>
            <div class="br mb20">
                <div class="fl">
                    <a href="#" class="jihua">Java新特性学习笔记</a><br>

                    <span class="iconfont">&#xe8cf;</span>
                    <span>发表于 2022-05-02</span>

                    <span>|</span>

                    <span class="iconfont">&#xe60c;</span>
                    <a href="#"><span>开发基础</span></a>

                    <span>|</span>

                    <span class="iconfont">&#xe60d;</span>
                    <a href="#"><span>后端学习 Java基础 &nbsp;</span></a>


                    <p>一次编译，四处运行。</p>
                </div>
                <a href="#" class="fr"><img src="@/assets/images/12.png"></a>
            </div>
            <div class="ar mb20">
                <a href="#" class="fl"><img src="@/assets/images/11.png"></a>
                <div class="fr">
                    <a href="#" class="jihua">寄生獣</a><br>

                    <span class="iconfont">&#xe8cf;</span>
                    <span>发表于 2022-06-18</span>

                    <span>|</span>

                    <span class="iconfont">&#xe60c;</span>
                    <a href="#"><span>日语单词</span></a>

                    <span>|</span>

                    <span class="iconfont">&#xe60d;</span>
                    <a href="#"><span>日语学习 日语漫画</span></a>
                    <p class="hidd">作者岩明均，作品描写了平凡的高中生泉新一和寄生在他体内、与其右手同化的生物右共存的故事。漫画荣获了日本奖等等啥的</p>
                </div>
            </div> 
        </div>
    </div>
</template>

<script>
export default {
    name:"ContentRight",
}
</script>

<style scoped>
    /* 内容右部分 */
.rrr{
  margin-top: 40px;
}
.rrr .ar,
.br {
  /* border: 1px solid rgb(179, 177, 177); */
  width: 840px;
  height: 270px;
  border-radius: 5%;
  box-shadow: -5px -5px 12px rgb(222, 221, 221);
  overflow: hidden;
}

.rrr .ar img {
  width: 340px;
  height: 270px;
}

.rrr .ar .fr {
  margin-right: 10px;
  margin-top: 80px;
  width: 450px;
  height: 120px;
  /* background-color: pink; */
}

.rrr .ar .jihua {
  display: inline-block;
  font-size: 28px;
  margin-bottom: 10px;
}

.rrr .ar span{
  margin-right: 5px;
  font-size: 15px;
  color: gray;
  /* margin-top: 10px; */
  /* margin-bottom: px; */
}

.rrr .ar p {
  display: inline-block;
  font-size: 17px;
  margin-top: 10px;
}

.rrr .ar .hidd {
  width: 450px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rrr .br img {
  width: 360px;
  height: 290px;
}

.rrr .br .fl {
  margin-left: 30px;
  margin-top: 80px;
  text-align: left;
  width: 430px;
  height: 100px;
  /* background-color: pink; */
}

.rrr .br .jihua {
  display: inline-block;
  margin-bottom: 10px;
  font-size: 28px;
}

.rrr .br span {
  margin-right: 5px;
  font-size: 15px;
  color: gray;
}

.rrr .br p {
  font-size: 17px;
  margin-top: 10px;
}

.rrr .br .hidd {
  width: 430px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rrr a:hover,
.shortcut a:hover {
  color: skyblue;
}


.bgc2 a{
  color: white;
}
   /* 图片经过放大 */
 img{
  transition: all 0.8s;
  overflow: hidden;
}
img:hover{
  transform: scale(1.1)
}
</style>